<template>
  <div id="register">
    <div class="login_bg" :style="{'background-image':`url(${this.back})`}"></div>
    <div class="bg_cover"></div>
    <div class="login_body">
      <h3>众众管理员注册</h3>
      <el-form :model="admin" :rules="admins" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="admin.nickname"></el-input>
        </el-form-item>

<!--        <el-form-item label="真实姓名" prop="realName">-->
<!--          <el-input v-model="admin.realName"></el-input>-->
<!--        </el-form-item>-->

        <el-form-item label="用户名" prop="username">
          <el-input v-model="admin.username"></el-input>
        </el-form-item>

        <el-form-item label="密码"  prop="password">
          <el-input v-model="admin.password" show-password  @blur="determinePassword"/>
        </el-form-item>
        <el-form-item label="确认密码"  prop="passwordAgain">
          <el-input v-model="admin.passwordAgain" show-password @blur="determinePassword"/>
        </el-form-item>

<!--        <el-form-item label="性别" >-->
<!--          <el-radio v-model="admin.sex" value="0" label="0">男</el-radio>-->
<!--          <el-radio v-model="admin.sex" value="0" label="1">女</el-radio>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="年龄" >-->
<!--          <el-input v-model="admin.age"/>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="手机号码" >-->
<!--          <el-input v-model="admin.phone"/>-->
<!--        </el-form-item>-->

        <el-form-item label="头像上传" >
          <el-upload
              class="avatar-uploader"
              :action="`${baseurl}/image_upload`"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              >
            <img  v-if="imageUrl" :src="admin.cover" class="avatar">
            <i style="border: 1px dashed #ffff" v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="register">注册</el-button>
          <el-button @click="adminRegister" type="success">已有账号? 前往登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {adminRegister} from "../network/admin";
import baseurl from '../const/baseurl'
export default {
  name: "register",
  data(){
    return{
      admin:{
        username: '',
        password: '',
        passwordAgain: '',
        nickname: '',
        age: '',
        sex: '',
        cover: '',
        realName: '',
        phone: '',
      },
      admins: {
        nickname:[{required:true,message:"请输入您的昵称"}],
        username:[{required:true,message:"请输入您的登录账号"}],
        password:[{required:true,message:"请输入您的密码"}],
        passwordAgain:[{required:true,message:"请输入您的密码"}],
        age:[{type:Number,message:'年龄必须是数字',trigger:"change"}],
        realName:[{required:true,message:"请输入您的真实姓名"}],
      },
      radio:"",
      imageUrl: '',
      bgList:[
        'https://bucket-yufei.oss-cn-beijing.aliyuncs.com/sixth-qianfeng/front/bg1.jpg',
        'https://bucket-yufei.oss-cn-beijing.aliyuncs.com/sixth-qianfeng/front/bg2.jpg',
        'https://bucket-yufei.oss-cn-beijing.aliyuncs.com/sixth-qianfeng/front/bg3.jpg',
        'https://bucket-yufei.oss-cn-beijing.aliyuncs.com/sixth-qianfeng/front/bg4.jpg',
        'https://bucket-yufei.oss-cn-beijing.aliyuncs.com/sixth-qianfeng/front/bg5.jpg',
        `https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg`,
      ],
      back:"",
      member:{},
      baseurl,
    }
  },
  methods:{
    register(){
      if (this.admin.password === this.admin.passwordAgain){
        adminRegister(this.admin).then((result)=>{
          console.log(result);
          if (result.data.code===200){
            this.$message.success('注册成功!');

            this.$router.push(`/`);
          }else{
            this.$message.error(result.data.message);
          }
        }).catch((reason)=>{
          console.log(reason);
          if (reason){
            this.$message.error('网络连接超时,请稍后重试...');
          }
        })
      }else{
        this.$notify.error({
          title: '密码不一致',
          message: '两次输入的密码不一致,请检查',
          duration: 0,
        });
      }
      // this.$router.push('/')
    },
    adminRegister(){//前往登录
      this.$router.push('/');
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(file);
      console.log(this.imageUrl);
      console.log(res);
      if (res.code===200){
        this.admin.cover=res.data;
        this.imageUrl=res.data;
      }
      // console.log(this.admin.adminIcon);
    },
    beforeAvatarUpload() {//file
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 2;
      //
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
    },
    //判断密码和确认密码是否相同
    determinePassword(){
      if (this.admin.password === this.admin.passwordAgain){
        console.log('两次密码相同');
      }else{
        if (this.admin.passwordAgain){
          console.log("两次密码不同");
          this.$notify.error({
            title: '两次密码不一致',
            message: '两次输入的密码不一致,请检查',
            duration: 0,
            // type: 'warning',
        });
        }
      }
    },

    //静态数据登录
    memberRegister(){
      const uuid = new Date().getTime() + Math.random().toString(36).substr(2);
      console.log(uuid);
      this.member={
        id:uuid,
        name:this.admin.realName,

      }
      this.$store.commit('addMember',)
    }

  },
  created() {
    // console.log(Math.random()*10);
    this.back=this.bgList[Math.round(Math.random() * this.bgList.length)];//随机背景
  },
}
</script>

<style scoped>
#register{
  position: relative;
  width: 100%;
  height: 121vh;
}
.login_bg{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  /*background-image: url("https://oss.yhuayi.com/sixth-qianfeng/front/bg1.jpg");*/
  object-fit: fill;
  background-attachment: fixed;
  background-size: 100% 100%;
  filter: blur(5px);
}
.bg_cover{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
  /*background: rgba(255,255,255,.2);*/
}

/*登录的身体*/
.login_body{
  position: relative;
  z-index: 1;
  /*top: 50%;*/
  /*left: 50%;*/
  /*transform: translateY(-120%) translateX(-55%);*/
  /*width: 500px;*/
  /*height: 350px;*/
  width: 500px;
  padding: 20px 30px;
  margin: 0 auto;
}

.login_body h3{
  text-align: center;
  line-height: 80px;
  font-size: 36px;
  font-family: '苏新诗柳楷简';
  color: white;
}










.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
